@mixin qin{
  display: block;
  content: " ";
  clear: both;
  overflow: hidden;
}
@mixin left{
  float: left;
}
@mixin yy{
  &:hover{
    transition: 1s;
    box-shadow: 0px 5px 10px 5px #cccccc;
    transform: translateY(-3px);
    .right-top-zhe{
      top:220px;
      transition: 0.3s;
    }
  }
  transition: 1s;
}
@mixin qyy{
  box-shadow: 0px 0px 0px 0px ;
  transform: translateY(0px);
}
@mixin sj{
  transition: 1s;
}
@mixin xd{
  position: relative;
}
@mixin jd{
  position: absolute;
}
@mixin box{
  box-sizing: border-box;
}
@mixin wh{
  width: 234px;
  height: 300px;
}
@mixin center{
  text-align: center;
}
*{
  margin: 0;
  padding: 0;
  list-style: none;
  text-decoration: none;
}

/*最大的div*/
.c-aa{
  width: 100%;
  background: #F5F5F5;
}
/*智能页面的样式*/
.zhineng{
  width: 1226px;
  margin: 0 auto;
  @include qin;
  .zn{
    width: 1226px;
    height: 60px;
    position: relative;
    line-height: 60px;
    .zn-left{
      margin-top: 20px;
      width: 1266px;
      height: 60px;
      font-size: 20px;
    }
    .u1{
      position: absolute;
      right: 0;
      top: 0;
      @include qin;
      li{
        height: 42px;
        @include left;
        margin-left: 30px;
        &:hover{
          color: #ff6700;
          border-bottom: 2px solid #ff6700;
        }
      }
    }
  }
  .left-left{
    width: 234px;
    height: 615px;
    @include left;
    @include yy;
  }

  .left{
    @include left;
    .left-top,.left-bottom{
      @include yy;
      background: white;
      @include wh;
      img{
        @include wh;
      }
    }
    .left-top{
        margin-bottom: 14px;
    }
  }

  .right{
      display: none;
    width: 992px;
    @include left;
    .right-top{
      background: white;
      margin-left: 14px;
      margin-bottom: 14px;
      position: relative;
      overflow: hidden;
      @include wh;
      @include box;
      @include center;
      @include left;
      @include yy;
      padding: 34px 0 20px 0;
      a{
        color: #000000;
        display: block;
        img{
          width: 150px;
          height: 150px;
        }
      }
      h3{
        margin: 0 10px;
        margin-top: 10px;
        font-size: 14px;
        font-weight: 400;
        @include center;
      }
      .p1{
        color: #b0b0b0;
        @include center;
        margin: 3px 10px 10px 10px;
        height: 18px;
        font-size: 12px;
        text-align: center;
        //超出部分变成。。。
        text-overflow: ellipsis;
        //不换行
        white-space: nowrap;
        overflow: hidden;
      }
      .p2{
        margin: 0 10px 10px;
        text-align: center;
        color: #ff6700;
        font-size: 13px;
        s{
          color: #b0b0b0;
          text-decoration:line-through ;
        }
      }
      /*黄色的遮罩*/
      .right-top-zhe{
        width: 100%;
        height: 300px;
        background: #ff6700;
        box-sizing: border-box;
        padding: 0 30px;
        overflow: hidden;
        @include jd;
        top: 300px;
        transition: 0.3s;
        .p3{
          color: white;
          margin-top: 10px;
          text-align: left;
          font-size: 12px;
        }
        .p4{
          font-size: 10px;
          @include jd;
          top:50px;
          color: #9d9d9d;
        }
      }
    }
    .last{
      @include wh;
      @include left;

      margin-left: 14px;
      margin-bottom: 14px;
      .last-top,.last-bottom{
        width: 234px;
        height: 143px;
        position: relative;
        background: white;
        @include yy;

        .tu1,.tu2{
          position: absolute;
        }
        .tu1{
          width: 80px;
          height: 80px;
          right: 60px;
          top: 32px;
          img{
            width: 80px;
            height: 80px;
          }
        }
        .tu2{
          width: 50px;
          height: 50px;
          right: 75px;
          top: 48px;
          img{
            width: 50px;
            height: 50px;
          }
        }
      }
      .last-top{
        margin-bottom: 14px;
        box-sizing: border-box;
        padding-top: 35px;
        a{
          font-size: 14px;
          color: #000000;
          margin-left: 30px;
        }
        p{
          color: #ff6700;
          font-size: 12px;
          margin-top: 5px;
          margin-left: 30px;
        }
      }
      .last-bottom{
        box-sizing: border-box;
        padding-top: 35px;
        a{
          margin-left: 30px;
          font-size: 18px;
          color: #000000;
        }
        p{
          color: #cccccc;
          font-size: 12px;
          margin-top: 5px;
          margin-left: 30px;
        }
      }
    }
  }
}
/*显示隐藏*/
.show{ display: block; }